<div class="container-fluid summary-tab" ng-controller="SummaryController">

  <div class="row" ng-if="runHistory.length > 0 && (!isPipelineRunning || selectedRunHistory !== runHistory[0]) && selectedRunHistory">
    <table class="table table-bordered">
      <thead>
      <tr>
        <th translate="global.form.runCount">Run Count</th>
        <th translate="global.form.started">Started</th>
        <th translate="global.form.completed">Completed</th>
        <th translate="global.form.duration">Duration</th>
        <th translate="global.form.user">User</th>
        <th translate="global.form.status">Status</th>
      </tr>
      </thead>
      <tbody ng-hide="showLoading">
      <tr>
        <td>{{selectedRunHistory.appName}}</td>
        <td>{{selectedRunHistory.started | date:'medium'}}</td>
        <td>{{selectedRunHistory.completed | date:'medium'}}</td>
        <td>{{selectedRunHistory.completed | amDifference : selectedRunHistory.started | amDurationFormat }} </td>
        <td>{{selectedRunHistory.user}}</td>
        <td>{{selectedRunHistory.status}}</td>
      </tr>
      </tbody>
    </table>

    <div class="alert alert-danger" role="alert" ng-if="selectedRunHistory.status !== 'STOPPED' && selectedRunHistory.message">
      <i class="fa fa-exclamation-triangle"></i>
      <span>Pipeline Status: {{selectedRunHistory.status}}: {{selectedRunHistory.message}}</span>
    </div>

  </div>

  <div class="row" ng-if="selectedType === pipelineConstant.PIPELINE && triggeredAlerts.length">
    <div class="col-sm-12 col-md-12 col-lg-12 triggered-alerts"
         ng-repeat="triggeredAlert in triggeredAlerts | filter: {type: 'METRIC_ALERT'}">
      <div class="alert alert-danger" role="alert">
        <i class="fa fa-exclamation-triangle"></i>
        <span>{{triggeredAlert.ruleDefinition.alertText}}</span>
        <span class="alert-details"> ( {{'home.detailPane.summaryTab.currentValue' | translate}}: {{triggeredAlert.gauge.value.currentValue}}, {{'home.detailPane.summaryTab.triggered' | translate}}: {{triggeredAlert.gauge.value.timestamp | amTimeAgo}} )</span>
        <div class="pull-right">
          <a href="#"
             ng-click="deleteTriggeredAlert(triggeredAlert)">
            <span translate="global.form.delete">Delete</span>
          </a>
          &nbsp;|&nbsp;
          <a href="#"
             ng-click="selectRulesTab(triggeredAlert)">
            <span translate="global.form.changeRule">Change Rule</span>
          </a>
        </div>

      </div>
    </div>
  </div>

  <div class="row" ng-if="restServiceAPIEndpoint">
    <div class="col-sm-12 col-md-12 col-lg-12">
      <div class="alert alert-info" role="alert">
        <span>REST Service API Endpoint - </span>
        <a ng-href="{{restServiceAPIEndpoint}}" target="_blank">{{restServiceAPIEndpoint}}</a>
      </div>
    </div>
  </div>

  <div ng-if="summaryDataLoaded && selectedType === pipelineConstant.STAGE_INSTANCE && customStageMeters">
    <div class="col-sm-4 chartPanels" ng-repeat="customStageMeter in customStageMeters">
      <div class="panel panel-default" ng-controller="CustomMeterController">
        <div class="panel-heading">
          <span>{{customStageMeter.label}} Meter</span>
        </div>
        <div class="panel-body">
          <ul class="properties">
            <li>
              <span class="properties-label">Count:</span>
              <span class="properties-value">{{count}}</span>
            </li>
          </ul>
          <nvd3 options="chartOptions" data="chartData" config="{ refreshDataOnly: true }"></nvd3>
        </div>
      </div>
    </div>
  </div>

  <div ng-if="summaryDataLoaded && selectedType === pipelineConstant.STAGE_INSTANCE && customStageHistograms">
    <div class="col-sm-4 chartPanels" ng-repeat="customStageHistogram in customStageHistograms">
      <div class="panel panel-default" ng-controller="CustomHistogramController">
        <div class="panel-heading">
          <span>{{customStageHistogram.label}} Histogram</span>
        </div>
        <div class="panel-body">
          <ul class="properties">
            <li>
              <span class="properties-label">Count:</span>
              <span class="properties-value">{{count}}</span>
            </li>
          </ul>
          <nvd3 options="chartOptions" data="chartData" config="{ refreshDataOnly: true }"></nvd3>
        </div>
      </div>
    </div>
  </div>


  <div ng-if="summaryDataLoaded && selectedType === pipelineConstant.STAGE_INSTANCE && customStageTimers">
    <div class="col-sm-4 chartPanels" ng-repeat="customStageTimer in customStageTimers">
      <div class="panel panel-default" ng-controller="CustomTimerController">
        <div class="panel-heading">
          <span>{{customStageTimer.label}} Timer</span>
        </div>
        <div class="panel-body">
          <ul class="properties">
            <li>
              <span class="properties-label">Count:</span>
              <span class="properties-value">{{count}}</span>
            </li>
          </ul>
          <nvd3 options="chartOptions" data="chartData" config="{ refreshDataOnly: true }"></nvd3>
        </div>
      </div>
    </div>
  </div>

  <div ng-if="summaryDataLoaded && selectedType === pipelineConstant.STAGE_INSTANCE && customStageGauges">
    <div class="col-sm-4 chartPanels" ng-repeat="customStageGauge in customStageGauges" ng-if="!customStageGauge.gaugeKey.startsWith('custom.Aggregator')">
      <div class="panel panel-default">
        <div class="panel-heading">
          <span>{{customStageGauge.label}}</span>
        </div>
        <div class="panel-body">
          <ul class="table-properties">
            <li ng-repeat= "(propertyKey, propertyValue) in detailPaneMetrics.gauges[customStageGauge.gaugeKey].value">
              <span class="properties-label">{{propertyKey}}: </span>
              <span class="properties-value">{{propertyValue}}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <!-- Aggregations -->
  <div ng-if="summaryDataLoaded && selectedType === pipelineConstant.STAGE_INSTANCE && customStageGauges">
    <div class="col-sm-12 col-md-12 col-lg-12" ng-repeat="customStageGauge in customStageGauges" ng-if="customStageGauge.gaugeKey.startsWith('custom.Aggregator')">
      <div class="panel panel-default" ng-controller="CustomBarChartController">
        <div class="panel-heading">
          <span>{{chartTitle}}</span>
        </div>
        <div class="panel-body">
          <nvd3 options="chartOptions" data="chartData" config="{ refreshDataOnly: true }"></nvd3>
        </div>
      </div>
    </div>
  </div>
  <!-- Aggregations -->

  <div class="chartPanels" ng-if="summaryDataLoaded">
    <ng-include ng-repeat="(chartIndex, chart) in $storage.summaryPanelList_v1" src="chart.templateId">
    </ng-include>
  </div>

  <div ng-if="summaryDataLoaded && selectedType === pipelineConstant.PIPELINE && runnerGauges">
    <div class="col-sm-4 chartPanels" ng-repeat="runnerGauge in runnerGauges">
      <div class="panel panel-default">
        <div class="panel-heading">
          <span> Runner {{runnerGauge.runnerId}}</span>
        </div>
        <div class="panel-body">
          <ul class="table-properties" ng-init="gaugeData = detailPaneMetrics.gauges[runnerGauge.gaugeKey].value">
            <li>
              <span class="properties-label">Current Stage:</span>
              <span class="properties-value">{{stageNameToLabelMap[gaugeData.currentStage]}}</span>
            </li>
            <li>
              <span class="properties-label">Batch Count:</span>
              <span class="properties-value">{{gaugeData.batchCount}}</span>
            </li>
            <li ng-if="gaugeData.currentStage !== 'IDLE'">
              <span class="properties-label">State:</span>
              <span class="properties-value">{{gaugeData.state}}</span>
            </li>
            <li ng-if="gaugeData.currentStage !== 'IDLE'">
              <span class="properties-label">In Stage Since:</span>
              <span class="properties-value">{{gaugeData.stageStartTime | date:'medium' }}</span>
            </li>
            <li ng-if="gaugeData.currentStage !== 'IDLE'">
              <span class="properties-label">Batch Start Time:</span>
              <span class="properties-value">{{gaugeData.batchStartTime | date:'medium' }}</span>
            </li>
            <li ng-if="gaugeData.currentStage !== 'IDLE'">
              <span class="properties-label">Offset Key:</span>
              <span class="properties-value">{{gaugeData.offsetKey}}</span>
            </li>
            <li ng-if="gaugeData.currentStage !== 'IDLE'">
              <span class="properties-label">Offset Value:</span>
              <span class="properties-value">{{gaugeData.offseValue}}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

</div>

<div class="alert alert-info" role="alert" ng-if="pipelineStateHistory.length > 0 && runHistory.length === 0">
  <span>No Run History found</span>
</div>

<script type="text/ng-template" id="summaryRecordPercentagePieChartTemplate">
  <div class="col-sm-4"
       ng-if="selectedType === pipelineConstant.STAGE_INSTANCE && timeRange === 'latest'"
       ng-controller="RecordPercentagePieChartController">
    <div class="panel panel-default">
      <div class="panel-heading">
        <span title="{{'home.detailPane.summaryTab.recordsProcessed' | translate}}"
          translate="home.detailPane.summaryTab.recordsProcessed">Records Processed</span>
        <button type="button" class="close" aria-label="Close" ng-click="removeChart(chart, chartIndex)">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="panel-body">

        <nvd3 ng-if="timeRange === 'latest' && !allDataZero"
              options="chartOptions" data="pieChartData" config="{ refreshDataOnly: true }"></nvd3>

        <span class="zero-value" ng-if="allDataZero">0</span>

      </div>
    </div>
  </div>
</script>


<script type="text/ng-template" id="summaryRecordCountBarChartTemplate">
  <div class="col-sm-4"
       ng-controller="RecordCountBarChartController">
    <div class="panel panel-default">
      <div class="panel-heading">
        <span title="{{'home.detailPane.summaryTab.recordCountBarChartTitle' | translate}}"
              translate="home.detailPane.summaryTab.recordCountBarChartTitle">Record Count (since last startup)</span>
        <button type="button" class="close" aria-label="Close" ng-click="removeChart(chart, chartIndex)">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="panel-body">

        <nvd3 ng-if="timeRange === 'latest'"
              options="chartOptions" data="barChartData" config="{ refreshDataOnly: true }"></nvd3>


        <nvd3 ng-if="timeRange !== 'latest'"
              options="timeSeriesChartOptions" data="timeSeriesChartData" config="{ refreshDataOnly: true }"></nvd3>

      </div>
    </div>
  </div>
</script>

<script type="text/ng-template" id="summaryRecordsThroughputMeterBarChartTemplate">
  <div class="col-sm-4"
       ng-controller="MeterBarChartController">
    <div class="panel panel-default">
      <div class="panel-heading">
        <span title="{{'home.detailPane.summaryTab.recordThroughput' | translate}}"
              translate="home.detailPane.summaryTab.recordThroughput">Record Throughput</span>
        <button type="button" class="close" aria-label="Close" ng-click="removeChart(chart, chartIndex)">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="panel-body">

        <nvd3 ng-if="timeRange === 'latest'"
              options="chartOptions" data="chartData" config="{ refreshDataOnly: true }"></nvd3>


        <nvd3 ng-if="timeRange !== 'latest'"
              options="timeSeriesChartOptions" data="timeSeriesChartData" config="{ refreshDataOnly: true }"></nvd3>

      </div>
    </div>
  </div>

</script>


<script type="text/ng-template" id="summaryBatchThroughputBarChartTemplate">
  <div class="col-sm-4"
       ng-if="selectedType === pipelineConstant.PIPELINE"
       ng-controller="BatchCountBarChartController">
    <div class="panel panel-default">
      <div class="panel-heading">
        <span title="{{'home.detailPane.summaryTab.batchThroughput' | translate}}"
          translate="home.detailPane.summaryTab.batchThroughput">Batch Throughput</span>
        <button type="button" class="close" aria-label="Close" ng-click="removeChart(chart, chartIndex)">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="panel-body">

        <nvd3 ng-if="timeRange === 'latest'"
              options="chartOptions" data="chartData" config="{ refreshDataOnly: true }"></nvd3>


        <nvd3 ng-if="timeRange !== 'latest'"
              options="timeSeriesChartOptions" data="timeSeriesChartData" config="{ refreshDataOnly: true }"></nvd3>

      </div>
    </div>
  </div>
</script>


<script type="text/ng-template" id="summaryRecordHistogramTemplate">
  <div class="col-sm-4"
       ng-if="activeConfigStatus.executionMode !== pipelineConstant.CLUSTER &&
       activeConfigStatus.executionMode !== pipelineConstant.CLUSTER_BATCH &&
       activeConfigStatus.executionMode !== pipelineConstant.CLUSTER_EMR_BATCH &&
       activeConfigStatus.executionMode !== pipelineConstant.CLUSTER_YARN_STREAMING &&
       activeConfigStatus.executionMode !== pipelineConstant.CLUSTER_MESOS_STREAMING && timeRange === 'latest'"
       ng-controller="HistogramChartController">
    <div class="panel panel-default">
      <div class="panel-heading">
        <span title="{{'global.form.histogram' | translate}}"
          translate="global.form.histogram">Records Per Batch Histogram (5 minutes decay)</span>
        <button type="button" class="close" aria-label="Close" ng-click="removeChart(chart, chartIndex)">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="panel-body">
        <nvd3 ng-if="timeRange === 'latest'"
              options="chartOptions" data="timerData" config="{ refreshDataOnly: true }"></nvd3>
      </div>
    </div>
  </div>
</script>


<script type="text/ng-template" id="summaryPipelineRunnersTemplate">
  <div class="col-sm-4"
       ng-if="selectedType === pipelineConstant.PIPELINE &&
       activeConfigStatus.executionMode !== pipelineConstant.CLUSTER &&
       activeConfigStatus.executionMode !== pipelineConstant.CLUSTER_BATCH &&
       activeConfigStatus.executionMode !== pipelineConstant.CLUSTER_EMR_BATCH &&
       activeConfigStatus.executionMode !== pipelineConstant.CLUSTER_YARN_STREAMING &&
       activeConfigStatus.executionMode !== pipelineConstant.CLUSTER_MESOS_STREAMING && timeRange === 'latest'"
       ng-controller="RunnersHistogramChartController">
    <div class="panel panel-default">
      <div class="panel-heading">
        <span title="{{'home.detailPane.summaryTab.runnersHistogram' | translate}}"
              translate="home.detailPane.summaryTab.runnersHistogram">Available Pipeline Runners Histogram (5 minutes decay)</span>
        <button type="button" class="close" aria-label="Close" ng-click="removeChart(chart, chartIndex)">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="panel-body">
          <ul class="properties">
            <li>
              <span class="properties-label">Current runners:</span>
              <span class="properties-value">{{detailPaneMetrics.gauges['RuntimeStatsGauge.gauge'].value.availableRunners}}/{{detailPaneMetrics.gauges['RuntimeStatsGauge.gauge'].value.totalRunners}}</span>
            </li>
          </ul>
        <nvd3 options="chartOptions" data="timerData" config="{ refreshDataOnly: true }"></nvd3>
      </div>
    </div>
  </div>
</script>


<script type="text/ng-template" id="summaryRecordsProcessedTemplate">
  <div class="col-sm-4"
       ng-if="activeConfigStatus.executionMode !== pipelineConstant.CLUSTER &&
       activeConfigStatus.executionMode !== pipelineConstant.CLUSTER_BATCH &&
       activeConfigStatus.executionMode !== pipelineConstant.CLUSTER_EMR_BATCH &&
       activeConfigStatus.executionMode !== pipelineConstant.CLUSTER_YARN_STREAMING &&
       activeConfigStatus.executionMode !== pipelineConstant.CLUSTER_MESOS_STREAMING && timeRange === 'latest'"
       ng-controller="BatchTimerChartController">
    <div class="panel panel-default">
      <div class="panel-heading">
        <span title="{{'home.detailPane.summaryTab.batchProcessingTimer' | translate}}"
          translate="home.detailPane.summaryTab.batchProcessingTimer">Batch Processing Timer (in seconds)</span>
        <button type="button" class="close" aria-label="Close" ng-click="removeChart(chart, chartIndex)">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="panel-body">
        <nvd3 ng-if="timeRange === 'latest'"
              options="chartOptions" data="timerData" config="{ refreshDataOnly: true }"></nvd3>
      </div>

    </div>
  </div>
</script>

<script type="text/ng-template" id="memoryConsumedLineChartTemplate">
  <div class="col-sm-4"
       ng-if="activeConfigStatus.executionMode !== pipelineConstant.CLUSTER &&
       activeConfigStatus.executionMode !== pipelineConstant.CLUSTER_BATCH &&
       activeConfigStatus.executionMode !== pipelineConstant.CLUSTER_EMR_BATCH &&
       activeConfigStatus.executionMode !== pipelineConstant.CLUSTER_YARN_STREAMING &&
       activeConfigStatus.executionMode !== pipelineConstant.CLUSTER_MESOS_STREAMING && monitorMemoryEnabled"
       ng-controller="MemoryConsumedLineChartController">
    <div class="panel panel-default">
      <div class="panel-heading">
        <span title="{{'home.detailPane.summaryTab.memoryConsumed' | translate}}"
          translate="home.detailPane.summaryTab.memoryConsumed">Memory Consumed</span>
        <button type="button" class="close" aria-label="Close" ng-click="removeChart(chart, chartIndex)">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="panel-body">
        <nvd3 ng-if="timeRange === 'latest'"
              options="chartOptions" data="lineChartData" config="{ refreshDataOnly: true }"></nvd3>


        <nvd3 ng-if="timeRange !== 'latest'"
              options="timeSeriesChartOptions" data="timeSeriesChartData" config="{ refreshDataOnly: true }"></nvd3>
      </div>
    </div>
  </div>
</script>


<script type="text/ng-template" id="summaryRuntimeStatisticsTemplate">
  <div class="col-sm-4"
       ng-if="selectedType === pipelineConstant.PIPELINE &&
       activeConfigStatus.executionMode !== pipelineConstant.CLUSTER &&
       activeConfigStatus.executionMode !== pipelineConstant.CLUSTER_BATCH &&
       activeConfigStatus.executionMode !== pipelineConstant.CLUSTER_EMR_BATCH &&
       activeConfigStatus.executionMode !== pipelineConstant.CLUSTER_YARN_STREAMING &&
       activeConfigStatus.executionMode !== pipelineConstant.CLUSTER_MESOS_STREAMING">
    <div class="panel panel-default">
      <div class="panel-heading">
        <span title="{{'home.detailPane.summaryTab.runtimeStatistics' | translate}}"
          translate="home.detailPane.summaryTab.runtimeStatistics">Runtime Statistics</span>
        <button type="button" class="close" aria-label="Close" ng-click="removeChart(chart, chartIndex)">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="panel-body double-size-panel">

        <ul class="table-properties">
          <li>
            <span class="properties-label">Current Stages:</span>
            <span class="properties-value"
                  ng-repeat="currentStage in detailPaneMetrics.gauges['RuntimeStatsGauge.gauge'].value.currentStages">{{stageNameToLabelMap[currentStage] + (!$last ? ', ' : '')}}</span>
            <span class="properties-value"
                  ng-if="!detailPaneMetrics.gauges['RuntimeStatsGauge.gauge'].value.currentStages || detailPaneMetrics.gauges['RuntimeStatsGauge.gauge'].value.currentStages.length === 0">--</span>
          </li>

          <li>
            <span class="properties-label last-batch">{{'home.detailPane.summaryTab.lastBatchInputRecordsCount' | translate}}:</span>
            <span class="properties-value">{{detailPaneMetrics.gauges['RuntimeStatsGauge.gauge'].value.lastBatchInputRecordsCount}}</span>
          </li>

          <li>
            <span class="properties-label last-batch">{{'home.detailPane.summaryTab.lastBatchOutputRecordsCount' | translate}}:</span>
            <span class="properties-value">{{detailPaneMetrics.gauges['RuntimeStatsGauge.gauge'].value.lastBatchOutputRecordsCount}}</span>
          </li>

          <li>
            <span class="properties-label last-batch">{{'home.detailPane.summaryTab.lastBatchErrorRecordsCount' | translate}}:</span>
            <span class="properties-value">{{detailPaneMetrics.gauges['RuntimeStatsGauge.gauge'].value.lastBatchErrorRecordsCount}}</span>
          </li>

          <li>
            <span class="properties-label last-batch">{{'home.detailPane.summaryTab.lastBatchErrorMessagesCount' | translate}}:</span>
            <span class="properties-value">{{detailPaneMetrics.gauges['RuntimeStatsGauge.gauge'].value.lastBatchErrorMessagesCount}}</span>
          </li>

          <li>
            <span class="properties-label">{{'home.detailPane.summaryTab.timeOfLastReceivedRecord' | translate}}:</span>
            <span class="properties-value"
                  ng-if="detailPaneMetrics.gauges['RuntimeStatsGauge.gauge'].value.timeOfLastReceivedRecord"
              >{{detailPaneMetrics.gauges['RuntimeStatsGauge.gauge'].value.timeOfLastReceivedRecord  | date:'medium'}}</span>
          </li>

          <li>
            <span class="properties-label">{{'home.detailPane.summaryTab.batchCount' | translate}}:</span>
            <span class="properties-value">{{detailPaneMetrics.gauges['RuntimeStatsGauge.gauge'].value.batchCount}}</span>
          </li>

          <li>
            <span class="properties-label">{{'home.detailPane.summaryTab.idleBatchCount' | translate}}:</span>
            <span class="properties-value">{{detailPaneMetrics.gauges['RuntimeStatsGauge.gauge'].value.idleBatchCount}}</span>
          </li>

          <li>
            <span class="properties-value">{{'home.detailPane.summaryTab.threadLastRun' | translate}}</span>
          </li>

          <li>
            <span class="properties-label">{{'home.detailPane.summaryTab.productionPipelineRunnable' | translate}}:</span>
            <span class="properties-value">{{detailPaneMetrics.gauges['health.ProductionPipelineRunnable.gauge'].value.timestamp  | date:'medium'}}</span>
          </li>

          <li>
            <span class="properties-label">{{'home.detailPane.summaryTab.rulesConfigLoaderRunnable' | translate}}:</span>
            <span class="properties-value">{{detailPaneMetrics.gauges['health.RulesConfigLoaderRunnable.gauge'].value.timestamp  | date:'medium'}}</span>
          </li>

          <li>
            <span class="properties-label">{{'home.detailPane.summaryTab.dataObserverRunnable' | translate}}:</span>
            <span class="properties-value">{{detailPaneMetrics.gauges['health.DataObserverRunnable.gauge'].value.timestamp  | date:'medium'}}</span>
          </li>

          <li>
            <span class="properties-label">{{'home.detailPane.summaryTab.metricObserverRunnable' | translate}}:</span>
            <span class="properties-value">{{detailPaneMetrics.gauges['health.MetricObserverRunnable.gauge'].value.timestamp  | date:'medium'}}</span>
          </li>

          <li>
            <span class="properties-label">{{'home.detailPane.summaryTab.metricsEventRunnable' | translate}}:</span>
            <span class="properties-value">{{detailPaneMetrics.gauges['health.MetricsEventRunnable.gauge'].value.timestamp  | date:'medium'}}</span>
          </li>

        </ul>

      </div>
    </div>
  </div>
</script>


<script type="text/ng-template" id="slaveSDCInstancesTemplate">
  <div class="col-sm-4"
       ng-if="selectedType === pipelineConstant.PIPELINE && (
        activeConfigStatus.executionMode === pipelineConstant.CLUSTER  ||
        activeConfigStatus.executionMode === pipelineConstant.CLUSTER_BATCH ||
        activeConfigStatus.executionMode === pipelineConstant.CLUSTER_EMR_BATCH ||
        activeConfigStatus.executionMode === pipelineConstant.CLUSTER_YARN_STREAMING ||
        activeConfigStatus.executionMode === pipelineConstant.CLUSTER_MESOS_STREAMING)">
    <div class="panel panel-default">
      <div class="panel-heading">
        <span title="{{'home.detailPane.summaryTab.slaveSDCInstances' | translate}}"
              translate="home.detailPane.summaryTab.slaveSDCInstances">Slave SDC Instances</span>
        <button type="button" class="close" aria-label="Close" ng-click="removeChart(chart, chartIndex)">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="panel-body">
        <ul class="table-properties">
          <li ng-repeat="sdcURL in detailPaneMetrics.slaves">
            <a href="/rest/v1/cluster/redirectToSlave?name={{pipelineConfig.info.pipelineId}}&sdcURL={{sdcURL}}"
               target="_blank">{{sdcURL}}</a>
          </li>
        </ul>

        <span class="no-data-available"
              ng-if="!detailPaneMetrics || !detailPaneMetrics.slaves || detailPaneMetrics.slaves.length === 0"
              translate="global.messages.info.noDataAvailable">No Data Available.</span>

      </div>
    </div>
  </div>
</script>


<script type="text/ng-template" id="summaryAllStageBatchTimerBarChartTemplate">
  <div class="col-sm-4"
       ng-if="selectedType === pipelineConstant.PIPELINE &&
       activeConfigStatus.executionMode !== pipelineConstant.CLUSTER &&
       activeConfigStatus.executionMode !== pipelineConstant.CLUSTER_BATCH &&
       activeConfigStatus.executionMode !== pipelineConstant.CLUSTER_EMR_BATCH &&
       activeConfigStatus.executionMode !== pipelineConstant.CLUSTER_YARN_STREAMING &&
       activeConfigStatus.executionMode !== pipelineConstant.CLUSTER_MESOS_STREAMING"
       ng-controller="AllStageBatchTimerChartController">
    <div class="panel panel-default">
      <div class="panel-heading">
        <span title="{{'home.detailPane.summaryTab.stageBatchProcessingTimer' | translate}}"
              translate="home.detailPane.summaryTab.stageBatchProcessingTimer">Stage Batch Processing Timer (in seconds)</span>
        <button type="button" class="close" aria-label="Close" ng-click="removeChart(chart, chartIndex)">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="panel-body double-size-panel">

        <nvd3 ng-if="timeRange === 'latest' && !allDataZero"
              options="chartOptions" data="chartData" config="{ refreshDataOnly: true }"></nvd3>


        <nvd3 ng-if="timeRange !== 'latest' && !allDataZero"
              options="timeSeriesChartOptions" data="timeSeriesChartData" config="{ refreshDataOnly: true }"></nvd3>


        <span class="zero-value" ng-if="allDataZero">0</span>


        <ul class="properties" ng-if="timeRange === 'latest'">
          <li>
            <span class="properties-label"> Total:</span>
            <span class="properties-value">{{totalValue}} seconds</span>
          </li>
        </ul>

      </div>
    </div>
  </div>
</script>

<script type="text/ng-template" id="summaryAllStageMemoryConsumedBarChartTemplate">
  <div class="col-sm-4"
       ng-if="selectedType === pipelineConstant.PIPELINE &&
       activeConfigStatus.executionMode !== pipelineConstant.CLUSTER &&
       activeConfigStatus.executionMode !== pipelineConstant.CLUSTER_BATCH &&
       activeConfigStatus.executionMode !== pipelineConstant.CLUSTER_EMR_BATCH &&
       activeConfigStatus.executionMode !== pipelineConstant.CLUSTER_YARN_STREAMING &&
       activeConfigStatus.executionMode !== pipelineConstant.CLUSTER_MESOS_STREAMING &&
       monitorMemoryEnabled"
       ng-controller="AllStageMemoryConsumedChartController">
    <div class="panel panel-default">
      <div class="panel-heading">
        <span title="{{'home.detailPane.summaryTab.stageMemoryConsumed' | translate}}"
              translate="home.detailPane.summaryTab.stageMemoryConsumed">Stage Heap Memory Usage</span>
        <button type="button" class="close" aria-label="Close" ng-click="removeChart(chart, chartIndex)">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="panel-body double-size-panel">

        <nvd3 ng-if="timeRange === 'latest' && !allDataZero"
              options="chartOptions" data="chartData" config="{ refreshDataOnly: true }"></nvd3>


        <nvd3 ng-if="timeRange !== 'latest' && !allDataZero"
              options="timeSeriesChartOptions" data="timeSeriesChartData" config="{ refreshDataOnly: true }"></nvd3>

        <span class="zero-value" ng-if="allDataZero">0</span>

        <ul class="properties" ng-if="timeRange === 'latest'">
          <li>
            <span class="properties-label"> Total:</span>
            <span class="properties-value">{{totalValue}} MB</span>
          </li>
        </ul>

      </div>
    </div>
  </div>
</script>


<script type="text/ng-template" id="summaryRuntimeConstantsTemplate">
  <div class="col-sm-4"
       ng-if="selectedType === pipelineConstant.PIPELINE &&
       activeConfigStatus.attributes &&
       activeConfigStatus.attributes['RUNTIME_PARAMETERS']">
    <div class="panel panel-default">
      <div class="panel-heading">
        <span title="{{'home.detailPane.summaryTab.runtimeParameters' | translate}}"
              translate="home.detailPane.summaryTab.runtimeParameters">Runtime Parameters</span>
        <button type="button" class="close" aria-label="Close" ng-click="removeChart(chart, chartIndex)">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="panel-body">
        <ul class="table-properties">
          <li ng-repeat="(key, value) in activeConfigStatus.attributes['RUNTIME_PARAMETERS']">
            <span class="properties-label last-batch">{{key}}:</span>
            <span class="properties-value">{{value}}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</script>
